<!--
 * @Author: gao_m3
 * @Date: 2021-09-10 14:49:59
 * @LastEditors: chen_yt
 * @LastEditTime: 2022-09-21 15:06:00
 * @Descripttion: 
-->
<template>
  <div class="micro-front-desc-container">
    <drawer-layout>
      <template v-slot:left="{ setFolded }">
        <fks-query-page
          v-loading="tableLoading"
          :data="tableData"
          :page="false"
          :element-loading-text="LANG.LOADING"
          :table-name="LANG.SUB_APPLY_LIST"
        >
          <template slot="singleSearch">
            <fks-button icon="fks-icon-plus" type="primary" @click="add">
              <span style="vertical-align: middle">{{ LANG.ADD }}</span>
            </fks-button>
          </template>
          <template>
            <fks-table-column type="index" align="center" label="#">
              <template slot-scope="scope">
                {{ scope.$index + 1 }}
              </template>
            </fks-table-column>
            <fks-table-column
              prop="name"
              align="left"
              :label="LANG.ACTUAL_NAME"
            >
              <template slot-scope="scope">
                {{ scope.row.name }}
              </template>
            </fks-table-column>
            <fks-table-column
              prop="entry"
              align="left"
              :label="LANG.RUN_ADDRESS"
            />
            <fks-table-column
              align="left"
              prop="activeRoute"
              :label="LANG.ACTIVE_ROUTE"
            />
          </template>
        </fks-query-page>
      </template>
      <template #right>
        <div class="storage-app-box">
          <fks-query-page
            v-loading="tableLoading"
            :data="storageApp"
            :page="false"
            :element-loading-text="LANG.LOADING"
            :table-name="LANG.APP_IN_STORAGE"
          >
            <template slot="singleSearch">
              <fks-button icon="fks-icon-plus" @click="loadAllStorage">
                <span style="vertical-align: middle">{{
                  LANG.REGISTER_ALL
                }}</span>
              </fks-button>
              <fks-button
                icon="fks-icon-delete"
                type="danger"
                plain
                @click="clearCache"
              >
                <span style="vertical-align: middle">{{ LANG.CLEAR }}</span>
              </fks-button>
            </template>
            <template>
              <fks-table-column type="index" align="center" label="#">
                <template slot-scope="scope">
                  {{ scope.$index + 1 }}
                </template>
              </fks-table-column>
              <fks-table-column
                prop="name"
                align="left"
                :label="LANG.ACTUAL_NAME"
              >
                <template slot-scope="scope">
                  {{ scope.row.name }}
                </template>
              </fks-table-column>
              <fks-table-column
                prop="entry"
                align="left"
                :label="LANG.RUN_ADDRESS"
              />
              <fks-table-column
                prop="autoRegister"
                align="center"
                header-align="center"
                min-width="100"
                :label="LANG.AUTO_REGISTER"
              >
                <template slot-scope="scope">
                  <div @click.stop.prevent>
                    <fks-switch
                      v-model="scope.row.autoRegister"
                      :active-value="true"
                      :inactive-value="false"
                    />
                  </div>
                </template>
              </fks-table-column>
              <fks-table-column
                :label="LANG.OPERATION"
                width="100"
                align="left"
              >
                <template slot-scope="scope">
                  <fks-button type="text" @click="register(scope.row)">
                    {{ LANG.REGISTER }}
                  </fks-button>
                  <fks-button danger-text @click="deleteRow(scope.row)">
                    {{ LANG.DELETE }}
                  </fks-button>
                </template>
              </fks-table-column>
            </template>
          </fks-query-page>
        </div>
      </template>
    </drawer-layout>
    <register
      v-if="dialogVisible"
      :visible.sync="dialogVisible"
      @submit="submit"
    >
    </register>
  </div>
</template>


<script>
// import Mix from '@/mixins/module'
import DrawerLayout from '@/components/DrawerLayout'
import Register from './register'
import { registerExtraApp, getSubAppList } from '@/microapp/qiankun'
export default {
  name: 'MFE',
  // mixins: [Mix],
  components: {
    DrawerLayout,
    Register
  },
  data() {
    return {
      tableLoading: false,
      storageName: 'extra_subapps',
      storageApp: [],
      dialogVisible: false
    }
  },
  computed: {
    tableData() {
      return getSubAppList()
    }
  },
  watch: {
    storageApp: {
      deep: true,
      handler: function (val) {
        let originStorageApp = this.getStorage()
        if (originStorageApp != val) {
          this.$storage.set(`${this.storageName}`, JSON.stringify(val))
        }
      }
    }
  },
  methods: {
    add() {
      this.dialogVisible = true
    },
    submit(app) {
      this.dialogVisible = false
      this.register(app)
    },
    deleteRow(row) {
      this.storageApp = this.storageApp.filter((item) => item == row)
    },
    clearCache() {
      this.$storage.remove(`${this.storageName}`)
      this.storageApp = this.getStorage()
    },

    loadAllStorage() {
      let appList = this.getStorage()
      for (let app of appList) {
        this.register(app)
      }
    },
    getStorage() {
      let appList = this.$storage.getObject(`${this.storageName}`)
      if (!Array.isArray(appList)) {
        appList = []
      }
      return appList
    },
    register(app = {}, noMsg = false) {
      let result = registerExtraApp(app)

      if (!result) {
        if (noMsg) return
        this.$message({
          type: 'error',
          message: this.LANG.REGISTER_ERROR
        })
        return
      }

      if (!noMsg) {
        this.$message({
          type: 'success',
          message: this.LANG.REGISTER_SUCCESS
        })
      }

      let appList = this.getStorage()
      appList = appList.filter((item) => item.name != app.name)
      appList.push({ autoRegister: false, ...app })

      this.storageApp = appList
    }
  },
  mounted() {
    this.storageApp = this.getStorage()
    this.storageApp.forEach((item) => {
      if (item.autoRegister) {
        this.register(item, true)
      }
    })
  }
}
</script>
<style lang="scss" scoped>
.micro-front-desc-container {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: white !important;
}
.storage-app-box {
  position: relative;
  width: 100%;
  height: 100%;
}
</style>
